<template>
    <div class="slider-container">
        <div class="slider">
            <div class="slide banner1">
                <div class="type">
                    <div class="type-item">
                        <div class="num">
                            <div class="old">老人</div>
                            <div>{{ types["老人"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['老人'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">老人在识别人数的占比 &nbsp;&nbsp; {{ (types['老人'] / sum * 100).toFixed(2) }}% </div>
                    </div>
                    <div class="type-item">
                        <div class="num">
                            <div class="old">领导</div>
                            <div>{{ types["领导"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['领导'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">领导在识别人数的占比 &nbsp;&nbsp; {{ (types['领导'] / sum * 100).toFixed(2) }}% </div>
                    </div>
                    <div class="type-item">
                        <div class="num">
                            <div class="old">残疾</div>
                            <div>{{ types["残疾"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['残疾'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">残疾人在识别人数的占比 &nbsp;&nbsp; {{ (types['残疾'] / sum * 100).toFixed(2) }}% </div>
                    </div>
                    <div class="type-item">
                        <div class="num">
                            <div class="old">小孩</div>
                            <div>{{ types["小孩"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['小孩'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">小孩在识别人数的占比 &nbsp;&nbsp; {{ (types['小孩'] / sum * 100).toFixed(2) }}% </div>
                    </div>
                    <div class="type-item">
                        <div class="num">
                            <div class="old">工作人员</div>
                            <div>{{ types["工作人员"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['工作人员'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">工作人员在识别人数的占比 &nbsp;&nbsp; {{ (types['工作人员'] / sum * 100).toFixed(2) }}%
                        </div>
                    </div>
                    <div class="type-item">
                        <div class="num">
                            <div class="old">其它客户（以上都不属于的人）</div>
                            <div>{{ types["其他客户"] }}人</div>
                        </div>
                        <el-progress :text-inside="false" :stroke-width="26" :percentage="types['其他客户'] / sum * 100"
                            :show-text="false" color="#50CED5"></el-progress>
                        <div class="percent">其它客户在识别人数的占比 &nbsp;&nbsp; {{ (types['其他客户'] / sum * 100).toFixed(2) }}%
                        </div>
                    </div>
                </div>
                <div class="middle">
                    <div class="number">{{ sum }}</div>
                    <div>识别人数</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

import { identifyTypes } from '@/api/statistics';

export default {
    name: "peopleCountByType",  //识别人数按类型分类
    components: {
    },
    props: {
        month: {
            type: String,
            // required: true,
        }
    },
    data() {
        return {
            types: {
                "小孩": 0,
                "领导": 0,
                "特别关心": 0,
                "老人": 0,
                "敏感用户": 0,
                "工作人员": 0,
                "其它客户（以上都不属于的人）": 0,
                "残疾": 0,
            },
            sum: 0

        };
    },
    watch: {
        month(val) {
            // console.log('month', val);
            this.nowMonth = val;
            this.identifyTypes();
        }
    },
    created() {
        // this.identifyTypes();
    },

    mounted() {

    },
    methods: {
        identifyTypes() {
            let query = {
                month: this.nowMonth
            }
            identifyTypes(query).then(res => {
                if (res.code === 200) {
                    this.types = res.data;
                    console.log('this.types', this.types);


                    for (const key in this.types) {
                        this.sum += parseInt(this.types[key]);
                    }
                } else {
                    console.log("获取数据失败");
                }
            }).catch(err => {
                console.error(err);
            });
        }
    }
};
</script>


<style lang="scss" scoped>
.slider-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner1 {
    background-image: url(../../../assets/banner7.png);
    color: white;
    font-family: "微软雅黑";
    position: relative;
}

.type {
    margin-top: 300px;
    padding: 0 92px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .type-item {
        width: 624px;
        margin-bottom: 120px;
        font-size: 20px;

        .num {
            margin-bottom: 22px;
            display: flex;
            justify-content: space-between;

            .old {
                color: #4BCCD5;
            }

        }

        .percent {
            margin-top: 14px;
            text-align: left;
        }

    }
}

::v-deep .el-progress-bar__outer {
    background-color: rgba(26, 46, 67, 0.4) !important;
    border: 1px solid #50CED5;
    box-sizing: border-box;
}

.middle {
    color: #4BCCD5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 20px;
    font-weight: 900;
    font-family: "微软雅黑";

    .number {
        font-size: 36px;
        margin-bottom: 16px;
        font-weight: 900;
    }
}
</style>